<template>
    <el-popover class="module-molePicScroll" placement="right" width="500" trigger="click">
        <div class="setting-container-pic-scroll">
            <header>
                <div class="sub-item">平铺滑动图片设置<span>(最少1张，上下拖动排序)</span></div>
                <!--<a href="javascript:;" class="remove-btn" type="text" @click="()=>{ remove(moduleIndex); }">删除模块</a>-->
            </header>
            <section>
              <div class="flex-container anchor-point-container">
                <div class="label">锚点设置：</div>
                <el-checkbox v-model="data.is_anchor_point" @change="(value)=>{data.anchor_point_name = ''; updateAnchorPoint()}">设为锚点</el-checkbox>
                <div>
                  <el-input :disabled="!data.is_anchor_point" v-model="data.anchor_point_name" placeholder="请输入锚点名称" maxLength="10" @change="updateAnchorPoint"></el-input>
                </div>
              </div>
                <el-form-item label="一屏显示:" prop="show_num" label-width="80px" style="padding: 6px 0 6px;margin-bottom: 0; background: #f7f7f7">
                    <el-radio-group v-model="data.show_num">
                        <el-radio :label="2">2个</el-radio>
                        <el-radio :label="3">3个</el-radio>
                        <el-radio :label="4">4个</el-radio>
                        <el-radio :label="5">5个</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="pic-container">
                    <draggable v-model="data.content_list" :options="{group:'content_list'}" @start="drag=true" @end="drag=false">
                        <div v-for="(item, i) in data.content_list" :key="i" class="item-container">
                            <el-upload
                                    class="avatar-uploader"
                                    accept="image/*"
                                    :action="upladUrl"
                                    name="file"
                                    :show-file-list="false"
                                    :before-upload="beforeUpload"
                                    :on-success="(res)=>{ item.pic = replaceImgUrl(res.filePath); }">
                                <img v-if="item.pic" :src="item.pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="sub-item">
                              <el-form-item label="标题:" prop="title" style="margin-bottom: 5px">
                                <el-input v-model="item.title" placeholder="建议10个字以内，选填" maxLength="10"></el-input>
                              </el-form-item>
                              <el-form-item label="交互类型:" prop="isPop" style="margin-bottom: 5px">
                                <el-radio v-model="item.isPop" :label="false">链接</el-radio>
                                <el-radio v-model="item.isPop" :label="true">弹窗</el-radio>
                              </el-form-item>
                              <el-form-item v-if="item.isPop" label="弹窗图片:" prop="isPop" style="margin-bottom: 5px">
                                <el-upload
                                  class="avatar-uploader"
                                  accept="image/*"
                                  :action="upladUrl"
                                  name="file"
                                  :show-file-list="false"
                                  :before-upload="beforeUpload"
                                  :on-success="(res)=>{ item.popPic = replaceImgUrl(res.filePath); }">
                                    <img v-if="item.popPic" :src="item.popPic" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                              </el-form-item>
                              <el-form-item :label="`${item.isPop?'弹窗':''}链接:`"  :prop="'content_list.' + i + '.type_val'" :rules="commonRules.ignoreInvite" style="margin-bottom: 5px">
                                <function-type :item-data="item" :disable-types="[5, 50, 78]" @dataChange="(data) => { item = data; }" />
                              </el-form-item>
                            </div>
                            <div class="tool-item" v-if="data.content_list.length>1">
                                <i class="el-icon-remove" @click="removeItem(i)"></i>
                            </div>
                        </div>
                    </draggable>
                </div>
                <div class="add-container">
                    <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="addItem">新增图片</el-button>
                </div>
            </section>
        </div>
        <div slot="reference" class="pic-scroll-container" :id="`moduleForm${moduleIndex}`">
            <div :style="`width: ${data.content_list.length*318/(data.show_num-0.5)}px; min-width: 100%`">
                <div class="pic-item" v-for="(item, i) in data.content_list" :key="i" :style="`width: ${318/(data.show_num-0.5)}px`">
                    <img v-if="item.pic" :src="item.pic">
                    <img v-else src="../../../../assets/common/default_goods_pic.png">
                </div>
            </div>
        </div>
    </el-popover>
</template>
<script>
  import draggable from 'vuedraggable'
  import FunctionType from './FunctionType'
  export default {
    name: 'H5PicFix',
    components: {
      draggable,
      FunctionType
    },
    props: {
      moduleIndex: {
        type: Number,
        default: 0
      },
      data: {
        type: Object,
        default: {}
      },
      updateAnchorPoint: {
        type: Function
      },
      remove: {
        type: Function
      }
    },
    data(){
      return {
        visible: false
      }
    },
    methods: {
      removeItem(i){
        this.data.content_list.splice(i, 1);
        /*this.$confirm('删除图片，图片的配置不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((action, instance) => {
          console.log(action, instance);
          this.data.content_list.splice(i, 1);
        }).catch((action, instance) => {
          console.log(action, instance)
        });*/
      },
      addItem(){
        this.data.content_list.push({
          pic: '',
          isPop: false,
          popPic: '',
          type: 0,
          type_val: '',
          from_type: 0,
          pack_type: 0,
          title: '',
          subtitle: ''
        })
      },
      checkUrlVal(item) {
        var pa=/^(?:(?!.*invite_code).*)/
        if (!pa.test(item.type_val)) {
          item.type_val = ''
        }
      },
      chooseJump(item){
        if(item.type === 1){
          let checkData = item.type_val ? [{
            goodsId: item.type_val,
            name: item.subtitle
          }] : [];
          this.goodsChoose({ count: 1 }, checkData).then(val => {
            item.type_val = val[0].goodsId;
            item.subtitle = val[0].name;
          });
          return false;
        } else if(item.type === 2){
          let checkData = item.type_val ? [{
            packageId: item.type_val,
            name: item.subtitle,
            type: item.pack_type
          }] : [];
          this.packageChoose({ count: 1 }, checkData).then(val => {
            item.type_val = val[0].packageId;
            item.subtitle = val[0].name;
            item.pack_type = val[0].type;
          });
          return false;
        } else if(item.type === 5){
          let checkData = item.type_val ? [{
            activityId: item.type_val,
            name: item.subtitle
          }] : [];
          this.activityChoose({ count: 1 }, checkData).then(val => {
            item.type_val = val[0].activityId;
            item.subtitle = val[0].name;
          });
          return false;
        } else if(item.type === 77){
          let checkData = item.type_val ? [{
            couponActivityId: item.type_val,
            name: item.subtitle
          }] : [];
          this.couponChoose({ count: 1 }, checkData).then(val => {
            item.type_val = val[0].couponActivityId;
            item.subtitle = val[0].name;
          });
          return false;
        } else if(item.type === 33) {
          let checkData = item.type_val ? [{
            seriesId: item.type_val,
            seriesName: item.subtitle,
            boxGoodsDTOS: item.boxGoodsDTOS,
            isSell: item.isSell,
            upshelf: item.isSell,
            continuePiece: item.continuePiece,
            firstPiece: item.firstPiece
          }] : []
          this.boxSeries(checkData, 1, 0).then(val => {
            item.type_val = val[0].seriesId
            item.subtitle = val[0].seriesName
            item.boxGoodsDTOS = val[0].boxGoodsDTOS
            item.isSell = val[0].isSell
            item.upshelf = val[0].upshelf,
            item.continuePiece = val[0].continuePiece
            item.firstPiece = val[0].firstPiece
          })
          return false;
        } else if(item.type === 34) {
          let checkData = item.type_val ? [{
            bonusGiftId: item.type_val,
            name: item.subtitle,
            configStatus: item.configStatus,
            startTime: item.startTime,
            endTime: item.endTime
          }] : []
          this.boxPackageGet(checkData, 1).then(val => {
            item.type_val = val[0].bonusGiftId
            item.subtitle = val[0].name
            item.configStatus = val[0].configStatus
            item.startTime = val[0].startTime
            item.endTime = val[0].endTime
          })
          return false;
        } else if (item.type === 88) {
          let checkData = [{
            goodsId:item.type_val
          }]
          this.bhsGoodsChoose(1, checkData, false).then(val => {
            item.plateform = 'ALI'
            item.type_val = val[0].goodsId
            item.subtitle = val[0].title
            item.startTime = val[0].couponUseStartTime
            item.endTime = val[0].couponUseEndTime
          })
        }
      }
    }
  }
</script>
<style lang="scss">
    @import "../../../../styles/mixin";
    /*.avatar-uploader .el-upload,
    .upload-img-list li,
    .upload-img-list .upload-btn{
        width: 80px;
        height: 80px;
        line-height: 78px;
    }*/
    .flex-container{
        @include flex;

        .item-type{
            width: 112px !important;
        }
        .sub-item{
            @include sub-item;
        }
    }
    .setting-container-pic-scroll{
        header{
            @include flex;
            @include a-center;
            border-bottom: 1px solid #efefef;
            padding-bottom: 6px;

            .sub-item{
                @include sub-item;
                span{
                    color: #999;
                    font-size: 12px;
                }
            }
            .remove-btn{
                color: red;
            }


        }
        .anchor-point-container{
          @include a-center;
          padding: 10px 0;

          .label{
            padding-right: 10px;
          }

          .el-input{
            margin-left: 10px;
          }
        }
        .item-container{
            @include flex;
            @include a-center;
            padding: 18px 6px 6px 6px;
            border: 1px solid #efefef;
            margin-top: 6px;

            .sub-item{
                @include sub-item;
            }
            .tool-item{
                color: red;
                padding: 6px;
                cursor: pointer;
            }
        }
        .pic-container{
            @include scrollbar;
            max-height: 400px;
        }
        .add-container{
            text-align: center;
            padding-top: 12px;
        }
    }
    .pic-scroll-container{
        @include scrollbar(3);
        width: 100%;

        .pic-item{
            display: inline-block;

            img{
                width: 100%;
                display: block;
            }
        }
    }
</style>
